<template>
  <demo-content :title="title">
    <p>
      canvas 元素大小默认是 {{ canvasRef?.width }} 像素宽，{{
        canvasRef?.height
      }}
      像素高。
    </p>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const title = "画布默认宽高";

// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const context = canvas.getContext("2d")!;

  context.font = "38pt Arial";
  context.fillStyle = "orange";
  context.strokeStyle = "blue";
  // 绘制文本
  console.log(`canvas height = ${canvas.height}`);
  context.fillText("Hello Canvas 002", 0, canvas.height / 2 + 15);
});
</script>

<style src="./default.css" scoped></style>
